<template>
    <h2 style="text-align: center;">修改房价信息</h2>
    <table border="1" class="table table-bordered">
        <tbody>
            <tr>
                <th>标准价</th>
                <th>
                    <input type="text" placeholder="请输入标准价" v-model="Info.RoomPrice_Price" />
                 </th>
            </tr>

            <tr>
                <th>收款方式</th>
                <th>
                    <input type="radio" :value="true" checked v-model="Info.RoomPrice_PayType"/>预订付费
                    <input type="radio" :value="false"  v-model="Info.RoomPrice_PayType"/>到店付费
                 </th>
            </tr>

            <tr>
                <th>早餐份数</th>
                <th>
                    <input type="text" placeholder="请输入早餐份数" v-model="Info.RoomPrice_BreakfastNum"/>
                 </th>
            </tr>

            <tr>
                <th>房间数量</th>
                <th>
                    <input type="text" placeholder="请输入房间数量"v-model="Info.RoomPrice_Num" />
                 </th>
            </tr>

            <tr>
                <th>房型名称</th>
                <th>
                    <select v-model="Info.RoomType_Id">
                        <option :value="-1">请选择</option>
                        <option v-for="item in InfoType" :value="item.RoomType_Id">{{ item.RoomType_Name }}</option>
                    </select>
                 </th>
            </tr>

            <tr>
                <th colspan="2" style="text-align: center;">
                    <input type="button" value="修改房价信息" class="btn btn-success" @click="AddRoomPrice" style="margin-right: 10px;" />
                    <a href="/ShowRoomPrice">返回列表</a>
                </th>
            </tr>
        </tbody>
    </table>
</template>


<script setup lang="ts">
    import {ref,onMounted, renderSlot} from 'vue';
    import axios from 'axios';
    import { useRouter ,useRoute} from 'vue-router';

    const router=useRouter();
    const route=useRoute();
    //房价响应式数据
    const Info=ref({
        RoomPrice_ID:route.params.id,
        RoomPrice_Price: "",
        RoomPrice_PayType: true,
        RoomPrice_BreakfastNum: "",
        RoomPrice_Num: "",
        RoomType_Id: -1
    })
    ///获取房型信息
    const InfoType=ref([{
        RoomType_Id: 0,
        RoomType_Name: ""
    }])
    onMounted(()=>{
        GetRoomTypes();//获取房型信息
        FanTian();//反填
    })
    //反填
    const FanTian=()=>{
        axios.get("https://localhost:44380/api/RoomPrice/GetRoomPrice?id="+route.params.id)
        .then(res=>{
            Info.value=res.data
        })
    }
    //获取房型信息
    const GetRoomTypes=()=>{
        axios.get("https://localhost:44380/api/RoomPrice/GetRoomTypes")
        .then(res=>{
            InfoType.value=res.data
        })
    }
    //修改
    const AddRoomPrice=()=>{
        axios.put("https://localhost:44380/api/RoomPrice/UpdRoomPrice",Info.value)
        .then(res=>{
            if(res.data>0)
            {
                alert('房价信息修改成功');
                router.push("/ShowRoomPrice");//跳转到显示页面
            }
            else
            {
                alert('房价信息修改失败');
            }
        })
    }

</script>